<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>打字机动画效果</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .text51 {
            width: 0;
            font-weight: bold;
            color: #000;
            white-space: nowrap;
            border-right: 1px solid rgba(0, 0, 0, 0.4);
            animation: texteff51 6s steps(10, start) infinite, lineeff51 0.4s steps(2, start) infinite;
            overflow: hidden;
        }

        @keyframes texteff51 {
            to {
                width: 10rem;
            }
        }

        @keyframes lineeff51 {
            0% {
                border-right: 1px solid rgba(0, 0, 0, 0);
            }

            100% {
                border-right: 1px solid rgba(0, 0, 0, 0.4);
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="text51">你好，很高兴遇见你！</div>
    </div>
</body>

</html>